<template>
	<view>
		<view class="peisong-box">
			<view>请选择配送方式</view>
			<view class="peisongType">
				<radio-group name="peisongType" @change="selectPeisong">
					<!-- <view>
						<label>
							<radio :value="ziti" :checked="type==ziti" /><text>自提</text>
						</label>
					</view> -->
					<view>
						<label>
							<radio :value="kuaidi" :checked="type==kuaidi" /><text>快递</text>
						</label>
					</view>
				</radio-group>
			</view>
			<view class="dizhi-wrapper" v-show="type=='kuaidi'">
				<view class="dizhi-box">
					<!-- <view class="mapdot">
						<u-icon name="map" size="28"></u-icon>
					</view> -->
					<view class="dizhi-info">
						<view>收货人：{{adName}}</view>
						<view>收货地址：<text class="moren">[默认]</text> {{adDetail}}</view>
					</view>
					<view class="tel">
						{{adPhone}}
					</view>
				</view>
				<view class="other-box" @click="otherDizhi()">其他地址 <uni-icons type="arrowright" size="20"></uni-icons></view>
			</view>
			<view class="dizhi-wrapper" v-show="type=='ziti'">
				<view class="dizhi-box">
					<!-- <view class="mapdot">
						<u-icon name="map" size="28"></u-icon>
					</view> -->
					<view class="dizhi-info">
						<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
							<view>自提点：{{zitiName}}</view>
							<view>
								{{zitiPhone}}
							</view>
						</view>
						<view>自提地址：{{zitiAddress}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tips tips2">商品信息</view>
		<view class="goods-info">
			<view>
				<image :src="switchImg(gImages)" class="goods-img" mode="heightFix"></image>
			</view>
			<view class="goods-name">
				<view>
					<view>{{gName}}</view>
					<view class="qian">{{gPrice}}/{{gdanwei}}</view>
				</view>
				<view>
					<view class="guige" v-if="guige!=null">{{guige}}</view>
					<view>×{{num}}</view>
				</view>
			</view>
		</view>
		<view class="peisong-box xingzhi">
			<view class="bot-border">此商品性质不支持7天退货</view>
			<view class="yunfei-box" v-if="type==kuaidi">
				<view>运费</view>
				<view>{{yunfei}}元</view>
			</view>
			<view>
				<view>买家留言：
					<input type="text" v-model="liuyan" placeholder="选填:对本次交易的说明" style="border: 1rpx #CCCCCC solid;padding: 15rpx;" />
				</view>
			</view>
		</view>
		<view class="bottom">
			<view>
				共<text>1</text>件 总金额：<text class="qian">{{gPrice}}</text>
			</view>
			<view class="confirm-btn" @click="goPay()">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ziti:"ziti",
				kuaidi:"kuaidi",
				type:'',		// 配送类型
				liuyan:"",		// 买家留言
				adid:"",		// 收货地址编号
				adName:"",		// 收货人信息
				adDetail:"",	// 收货地址
				adPhone:"",		// 收货人电话
				gid:'',			// 商品id
				gImages:"",		// 商品图片
				gName:"",		// 商品名称
				gPrice:"",		// 商品价格
				gdanwei:"",		// 商品单位
				guige:"",		// 商品规格
				names:"",		// 地址栏的规格值
				params:"",		// 地址栏的规格下标
				num:1,			// 购买数量
				allMoney:0,		// 总价格
				yunfei:0,		// 运费
				
				zitiId:'',		// 自提点ID
				zitiName:'',	// 自提点名称
				zitiAddress:'',	// 自提点地址
				zitiPhone:'',	// 自提点电话
			}
		},
		onLoad(opt) {
			// this.yunfei = opt.yunfei;
			if(!this.isNull(opt.liuyan)){
				this.liuyan = opt.liuyan;
			}
			this.gName = opt.gname;
			this.allMoney = opt.gprice*opt.num;
			this.gPrice = opt.gprice;
			this.gImages = opt.gimages;
			this.gdanwei = opt.gdanwei;
			this.gid = opt.gid;
			if(this.isNull(opt.names)){
				this.names = '';
				this.guige = '';
			}else{
				this.names = opt.names;
				this.guige = opt.names;
			}
			// this.names = opt.names?opt.names:null;
			// this.guige = opt.names?opt.names:null;
			this.params = opt.params?opt.params:null;
			// console.log("规格："+this.guige+" lala:"+opt.names)
			uni.$on('getDizhiFromLjgm',this.getDizhiFromLjgm);
			
			//选中的自提点
			this.type = opt.type;
			this.zitiId = opt.zitiId;
			this.zitiName = opt.zitiName;
			this.zitiAddress = opt.zitiAddress;
			this.zitiPhone = opt.zitiPhone;
		},
		methods: {
			// 获取收货地址from 立即购买
			getDizhiFromLjgm(){
				let uid = uni.getStorageSync('usersId');
				this.$http.get('/xieliancat.do?p=getAllAddress', {
						'userid':uid
				}).then(response => {
					this.adid = response.data.adId;
					this.adName = response.data.adName;
					this.adDetail = response.data.adDetail;
					this.adPhone = response.data.adPhone;
				})
			},
			// 选择配送方式
			selectPeisong(res){
				// xieliancat.do?p=getAllAddress
				this.type = res.detail.value;
				if(this.type=='kuaidi'){
					this.getDizhiFromLjgm();
				}else if(this.type=='ziti'){
					// console.log("发送数量："+this.num)
					uni.navigateTo({
						url:'../selectZitiDian/zitidianList?gid='+this.gid+'&yunfei='+this.yunfei+'&gname='+this.gName+'&gprice='+this.gPrice+'&num='+this.num+'&gimages='+this.gImages+'&gdanwei='+this.gdanwei+'&names='+this.names+'&params='+this.params+'&liuyan='+this.liuyan+'&getBack=1'
					})
				}
			},
			// 点击提交订单
			goPay(){
				if(this.isNull(this.type)){
					this.$u.toast("请选择收货方式")	;
					return;
				}
				if(this.gPrice < 0){
					this.$u.toast("金额小于0，请联系商家更改商品信息！");
					return;
				}
				// 先提交订单，获取订单号 xielianorder.do?p=submitOrderByMini&type=1
				let userid = uni.getStorageSync("usersId");
				let yunfei = 0;
				let params= this.params? encodeURIComponent( ('['+this.params+']')) :null;
				let names='';
				if(this.params!=null){
					if(this.params.length>0){
						names = this.names? encodeURIComponent( '['+this.names+']') :null ;
					}else{
						names = this.names? encodeURIComponent( '['+this.names+']') :null ;
					}
				}
				let xiaoshoujia = "";
				let num = 1;
				let sid = '';
				let index = "-1";	// 收货方式0 自提 1 快递
				if(this.type=='ziti'){
					index=0;
					this.adid = this.zitiId;
				}else if(this.type=='kuaidi'){
					index=1;
				}
				if(this.isNull(this.adid)){
					this.$u.toast("请选择收货地址");
					return;
				}
				this.$http.get('/xielianorder.do?p=submitOrderByMini&type=1', {	// type=1表示不打折
						'uid':userid,
						"gid":this.gid,
						"adid":this.adid,
						"beizhu":this.liuyan,
						"params": params,
						"names":names,
						"yunfei":yunfei,
						"price":this.gPrice,
						"xiaoshoujia":this.gPrice,
						"num":num, 
						"index":index,
						"sid":sid
				}).then(res => {
					console.log(res);
					if(res.data.code==500){
						this.$u.toast("出错了，请稍后重试");
						return;
					}
					if(res.data=="库存不足"){
						this.$u.toast("库存不足");
						return;
					}
					// 刷新订单分组个数
					uni.$emit("getOrderByGroup");
					// 再转到订单确认
					uni.navigateTo({
						url:'../SubmitOrder?orid='+res.data+"&gid="+this.gid
					})
				})
				
			},
			// 设置图片路径
			switchImg(s){
				return this.host+s;
			},
			// 点击其他地址
			otherDizhi(){
				uni.navigateTo({
					url:'../../center/shouHuo?from=3'
				})
			},
			// 判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
		filters:{
			resetGuige(s){
				let reg = /{/g;
				let reg2 = /}/g;
				return s.replace(reg,'').replace(reg2,'');
			}
		}
	}
</script>

<style scoped>
	.peisong-box{
		padding: 20rpx;
		background-color: white;
	}
.dizhi-box{
	margin-top: 20rpx;
	display: flex;
	align-items: center;
}
.peisongType view{
	margin-top: 25rpx;
	padding-bottom: 25rpx;
	border-bottom: 1rpx #c8ccd4 solid;
}
.xingzhi{
	margin-top: 20rpx;
	padding-top: 0rpx;
}
.xingzhi>view{
	padding: 10rpx;
}
.bot-border,.yunfei-box{
	border-bottom: 1rpx solid #F4F4F5;
height: 100rpx;
line-height: 100rpx;
}
.tips{
		margin-top: 20rpx;
	background-color: white;
	padding-top: 20rpx;
	padding-left: 20rpx;
	font-size: 22rpx;
}
.tips2{
	padding-bottom: 20rpx;
}
.confirm-btn{
	background-color: #FF7900;
	color: white;
	display: flex;
	height: 100rpx;
	box-sizing: border-box;
	padding: 0rpx 60rpx;
}
.dizhi-box .dizhi,.dizhi-box .mapdot{
	flex: 1;
	margin-right: 20rpx;
}
.dizhi-box .dizhi-info{
	flex: 5;
}
.moren{
	color: red;
}
.other-box{
	display: flex;
	justify-content: flex-end;
	margin-top: 10rpx;
}
.yunfei-box{
	display: flex;
	justify-content: space-between;
}
.dizhi-box .tel{
	flex: 2;
}
.bottom{
	padding-left: 10rpx;
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	box-sizing: border-box;
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	background: #F4F4F5;
	display: flex;
	justify-content: space-between;
}
.bottom text{
	color: red;
}
.goods-info{
	margin-top: 20rpx;
	display: flex;
	padding: 10rpx;
	height: 140rpx;
	align-items: flex-start;
	color: #111111;
	background-color: white;
}
.goods-info>view{
	flex: 1;
}
.guige{
	margin-top: 10rpx;
	color: #CCCCCC;
}
.qian::before{
	content: '￥';
}
.goods-name>view{
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.goods-info>view:nth-child(2){
	flex: 4;
}
.goods-info .goods-img{
	height: 100rpx;
	width: 100rpx;
}
</style>
